<template>
  <div class="right-nav">
    <div class="js-toggle-message">
      <button
        id="sitemessage"
        type="button"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <i class="icon-megaphone"></i>
      </button>
      <div class="dropdown-menu" role="menu" aria-labelledby="sitemessage">
        <ul>
          <li v-for="(item, index) in data" :key="index">
            <span class="time">{{
              item.createTime | dateFormat("MM-dd")
            }}</span>
            <nuxt-link :to="`/note/details/${item.noteId}`" no-prefetch>{{
              item.title
            }}</nuxt-link>
          </li>
        </ul>
        <div class="more-messages">
          <nuxt-link to="/note" no-prefetch>更多</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let data = await this.$axios.get("/api/get/all/note", {
        params: {
          pageSize: 5,
          pageNo: 0,
        },
      });
      this.data = data.data.result;
    },
  },
};
</script>

<style lang="scss" scoped>
.js-toggle-message {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
.js-toggle-message .dropdown-menu {
  top: 70px;
  right: -10px;
  width: 320px;
}
.js-toggle-message .dropdown-menu .more-messages {
  text-align: center;
}
.js-toggle-message .dropdown-menu .more-messages a {
  padding: 10px;
  background: #f5f5f5;
  display: block;
  color: #adadad;
  font-size: 13px;
}
.js-toggle-message .dropdown-menu .more-messages a:hover {
  color: #282828;
}
.js-toggle-message .dropdown-menu ul {
  margin: 18px 24px 13px 80px;
  padding-left: 15px;
  border-left: 1px solid #f1f1f1;
}
.js-toggle-message .dropdown-menu li {
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.js-toggle-message .dropdown-menu li a {
  color: #555;
}
.js-toggle-message .dropdown-menu li .time {
  padding-right: 10px;
  margin-right: 10px;
  position: absolute;
  font-size: 13px;
  left: 20px;
  margin-top: 2px;
}
.js-toggle-message .dropdown-menu li .time:after {
  content: "";
  width: 6px;
  height: 6px;
  right: -20.5px;
  top: 5px;
  border-radius: 10px;
  background: #c5c5c5;
  position: absolute;
}
.js-toggle-message .dropdown-menu li a:hover {
  color: #000;
}
.js-toggle-message .dropdown-menu li:first-child {
  color: #ff4a6a;
}
.js-toggle-message .dropdown-menu li:first-child a {
  font-weight: 700;
  color: #ff4a6a;
}
.js-toggle-message .dropdown-menu li:first-child .time {
  font-weight: bold;
}
.js-toggle-message .dropdown-menu li:first-child .time:after {
  background: #ff4a6a;
}
.js-toggle-message button {
  display: inline-block;
  background: none;
  font-size: 16px;
}
.js-toggle-message button i {
  margin-right: 5px;
}
.js-toggle-message::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 18px;
  background: #ddd;
  right: -10px;
  top: 3px;
}

.js-toggle-message button span {
  content: "";
  background-color: #f73f60;
  right: 5px;
  width: 6px;
  height: 6px;
  top: 5px;
  position: absolute;
  border-radius: 100%;
  display: inline-block;
}
</style>